const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
var ImageminPlugin = require('imagemin-webpack-plugin').default

const isProd = process.env.NODE_ENV === 'production'; 
console.log(isProd)

const cssDev = ['style-loader', 'css-loader', 'sass-loader'];
const cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
})
const cssConfig = isProd ? cssProd : cssDev;

module.exports = {
    entry:  {
        "main.bundle": './src/main.js',
        // 'contact': './src/contact.js'
      },
    output: {
        path: __dirname +"/dist",
        filename: '[name].[hash].js'
    },
    module: {
        rules: [
        {
            test: /\.scss$/,
            use: cssConfig
        },
        { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
        { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
        { test: /\.pug$/, loader: ['raw-loader', 'pug-html-loader'] },
        { test: /\.vue$/, loader: 'vue-loader',  exclude: /node_modules/},
        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'images/'
                }
              },
          ]
        },
        {
            test: /\.html$/,
            use: [ {
              loader: 'html-loader',
              options: {
                minimize: true
              }
            }],
        },
        
    ]
},
    devServer: {
        port: 9000,
        open: true,
        hot: true
      },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Custom template',
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: true
            },
            hash: true,
            chunks: ['main.bundle']
        }),
        // new HtmlWebpackPlugin({
        //     title: 'contact page',
        //     template: './src/contact.html',
        //     filename: 'contact.html',
        //     minify: {
        //         collapseWhitespace: true
        //     },
        //     hash: true,
        //     excludeChunks: ['app.bundle']
            
        // }),
        new ExtractTextPlugin({
            filename: "styles.css",
            disable: !isProd
        }),
        new CleanWebpackPlugin(['dist']),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new ImageminPlugin({
            disable: process.env.NODE_ENV !== 'production', // Disable during development
            pngquant: {
              quality: '95-100'
            }
        })
    ],
    
}